<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>


		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="../public/node_modules/element/element.css">
		<link rel="stylesheet" href="../public/node_modules/element/icon.css">
		<link rel="stylesheet" href="../public/css/public-pc.css">
		<link rel="stylesheet" href="../public/css/style-wap.css">
		<link rel="stylesheet" href="../public/css/public-wap.css">
		<link rel="stylesheet" href="../public/css/style-pc.css">
		<link rel="stylesheet" href="../public/css/animate.min.css">
		<script src="../public/js/jquery.js"></script>
		<script src="../public/js/jquery.scrollAnimations.min.js"></script>
		<script src="../public/js/popper.min.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="show-pc">
				<div class="about-head">
					<!-- banner内容 -->
					<div class="about-head-text">
						<div class="banner-head-title">关于我们</div>
						<div class="banner-head-text">ABOUT US</div>
					</div>
					<div class="about-head">
						<img src="../public/img/aboutBan.jpg" scale-animate="1" alt="" class="about-head-img" />
						<!-- banner内容 -->
						<div class="about-head-text" data-animation="fadeInDown">
							<div class="banner-head-title">关于我们</div>
							<div class="banner-head-text">ABOUT US</div>
						</div>
						<div class="banner-sel" data-animation="bounceInLeft">
							<div class="pageContent sel-box">
								<div class="sel-item">
									<a href="/psk-web-html/about/about.html">
										<div class="sel-item-text ">
											关于我们
										</div>
									</a>
									<div class="sel-item-text active">
										企业文化
									</div>
									<a href="/psk-web-html/EnterpriseAdvantages/EnterpriseAdvantages.html">
										<div class="sel-item-text">
											企业优势
										</div>
									</a>
									<a href="/psk-web-html/QualificationandHonor/QualificationandHonor.html">
										<div class="sel-item-text">
											资质荣誉
										</div>
									</a>
								</div>
								<div class="sel-item-right">
									<div class="home-img-box">
										<img src="../public/img/首页home.png" alt="" class="home-img" />
									</div>
									<div class="home-box-text">
										<a href="/psk-web-html/index/index.html">首页</a>
									</div>
									<div class="home-box-text">></div>
									<div class="home-box-text">关于我们</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="show-wap">
				<div class="about-head-wap">
					<img src="../public/img/aboutBan.jpg" scale-animate="1" alt="" class="about-head-img" />
					<div class="about-head-text" data-animation="fadeInDown">
						<div class="banner-head-title-wap ">关于我们</div>
						<div class="banner-head-text-wap">ABOUT US</div>
					</div>
					<div class="banner-sel-wap" data-animation="bounceInLeft">
						<div class="pageContent sel-box">
							<div class="sel-item">
								<a href="/psk-web-html/about/about.html">
									<div class="sel-item-text-wap ">
										关于我们
									</div>
								</a>

								<div class="sel-item-text-wap active">
									企业文化
								</div>

								<a href="/psk-web-html/EnterpriseAdvantages/EnterpriseAdvantages.html">
									<div class="sel-item-text-wap">
										企业优势
									</div>
								</a>
								<a href="/psk-web-html/QualificationandHonor/QualificationandHonor.html">
									<div class="sel-item-text-wap">
										资质荣誉
									</div>
								</a>
							</div>

						</div>
					</div>
				</div>
			</div>


			<!-- 内容区 -->
			<div class="show-pc">
				<div class="enterprise-content">
					<div class="enterprise-box pageContent">
						<div class="enterprise-left">
							<div class="enterprise-item" data-animation="fadeInUp">
								<div class="enterprise-title">1.企业宗旨</div>
								<div class="enterprise-text">诚信、高效、创新、务实</div>
								<div class="enterprise-text">
									诚信是企业通向外界的敲门砖;在技术发展与市场反馈的信息上，企业需及时的抓捕才能抢占先机;创新是企业持续发展的根本，创新则兴，不创则亡唯有不断创新才能走在行业前列;企业本着不浮夸、不形式的务实精神，不积跬步无以至千里。
								</div>
							</div>
							<div class="enterprise-item" data-animation="fadeInUp">
								<div class="enterprise-title">2.使命宗旨</div>
								<div class="enterprise-text">诚信、高效、创新、务实</div>
								<div class="enterprise-text">
									诚信是企业通向外界的敲门砖;在技术发展与市场反馈的信息上，企业需及时的抓捕才能抢占先机;创新是企业持续发展的根本，创新则兴，不创则亡唯有不断创新才能走在行业前列;企业本着不浮夸、不形式的务实精神，不积跬步无以至千里。
								</div>
							</div>
							<div class="enterprise-item">
								<div class="enterprise-title">3.企业宗旨</div>
								<div class="enterprise-text">诚信、高效、创新、务实</div>
								<div class="enterprise-text">
									诚信是企业通向外界的敲门砖;在技术发展与市场反馈的信息上，企业需及时的抓捕才能抢占先机;创新是企业持续发展的根本，创新则兴，不创则亡唯有不断创新才能走在行业前列;企业本着不浮夸、不形式的务实精神，不积跬步无以至千里。
								</div>
							</div>
							<div class="enterprise-item">
								<div class="enterprise-title">4.企业宗旨</div>
								<div class="enterprise-text">诚信、高效、创新、务实</div>
								<div class="enterprise-text">
									诚信是企业通向外界的敲门砖;在技术发展与市场反馈的信息上，企业需及时的抓捕才能抢占先机;创新是企业持续发展的根本，创新则兴，不创则亡唯有不断创新才能走在行业前列;企业本着不浮夸、不形式的务实精神，不积跬步无以至千里。
								</div>
							</div>
							<div class="enterprise-item">
								<div class="enterprise-title">5.企业宗旨</div>
								<div class="enterprise-text">诚信、高效、创新、务实</div>
								<div class="enterprise-text">
									诚信是企业通向外界的敲门砖;在技术发展与市场反馈的信息上，企业需及时的抓捕才能抢占先机;创新是企业持续发展的根本，创新则兴，不创则亡唯有不断创新才能走在行业前列;企业本着不浮夸、不形式的务实精神，不积跬步无以至千里。
								</div>
							</div>

							<div class="enterprise-round-box">
								<div class="enterprise-round-four" id="enterpriseRoundFour">
									<div class="enterprise-round-item-round" id="roundAcitve">
										<div class="roundAcitve"></div>
									</div>
								</div>
								<div class="enterprise-round-three"></div>
								<div class="enterprise-round-two"></div>
								<div class="enterprise-round-one">
									<div><img src="../public/img/三角形上.png" alt="" class="triangle upward"
											data-animation="fadeInDown" /></div>
									<div><img src="../public/img/三角形.png" alt="" class="triangle downward"
											data-animation="fadeInUp" /></div>
								</div>
							</div>
						</div>
						<div class="enterprise-right">
							<img src="../public/img/enterprise-right.png" alt=""  class="enterprise-right-img"/>
							<img src="../public/img/临床支持.png" alt=""  class="enterprise-right-img"/>
							<img src="../public/img/产品技术.png" alt=""  class="enterprise-right-img"/>
							<img src="../public/img/enterprise-right.png" alt=""  class="enterprise-right-img"/>
							<img src="../public/img/临床支持.png" alt=""  class="enterprise-right-img"/>
						</div>

					</div>
				</div>
			</div>
			<div class="show-wap">
				<div class="enterprise-content-wap">
					<div class="enterprise-box-wap pageContent">
						<div class="enterprise-box-item-wap">
							<div class="item-wap-title">1、企业宗旨</div>
							<div class="enterprise-text-wap">诚信、高效、创新、务实</div>
							<div class="enterprise-item-wap" data-animation="fadeInUp">
								诚信是企业通向外界的敲门砖;在技术发展与市场反馈的信息上，企业需及时的抓捕才能抢占先机;创新是企业持续发展的根本，创新则兴，不创则亡唯有不断创新才能走在行业前列;企业本着不浮夸、不形式的务实精神，不积跬步无以至千里。
							</div>
							<div class="enterprise-img-wap" data-animation="fadeInUp">
								<img src="../public/img/enterprise-right.png" alt="" />

							</div>
						</div>
						<div class="enterprise-box-item-wap">
							<div class="item-wap-title">2、企业宗旨</div>
							<div class="enterprise-text-wap">诚信、高效、创新、务实</div>
							<div class="enterprise-item-wap" data-animation="fadeInUp">
								诚信是企业通向外界的敲门砖;在技术发展与市场反馈的信息上，企业需及时的抓捕才能抢占先机;创新是企业持续发展的根本，创新则兴，不创则亡唯有不断创新才能走在行业前列;企业本着不浮夸、不形式的务实精神，不积跬步无以至千里。
							</div>
							<div class="enterprise-img-wap" data-animation="fadeInUp">
								<img src="../public/img/enterprise-right.png" alt="" />

							</div>
						</div>
						<div class="enterprise-box-item-wap">
							<div class="item-wap-title">3、企业宗旨</div>
							<div class="enterprise-text-wap">诚信、高效、创新、务实</div>
							<div class="enterprise-item-wap" data-animation="fadeInUp">
								诚信是企业通向外界的敲门砖;在技术发展与市场反馈的信息上，企业需及时的抓捕才能抢占先机;创新是企业持续发展的根本，创新则兴，不创则亡唯有不断创新才能走在行业前列;企业本着不浮夸、不形式的务实精神，不积跬步无以至千里。
							</div>
							<div class="enterprise-img-wap" data-animation="fadeInUp">
								<img src="../public/img/临床支持.png" alt="" />

							</div>
						</div>
					</div>
					<div class="pageContent ">
						<!-- 分页器 -->
						<div class="enterprise-li-wap">
						</div>

					</div>
				</div>
			</div>


		</div>
	</body>
	<script type="text/javascript" src="../public/node_modules/vue/vue.js"></script>
	<script type="text/javascript" src="../public/node_modules/element/element.js"></script>
	<script type="text/javascript" src="../public/js/pubilc.js"></script>
	<script type="text/javascript" src="../public/js/pubilc-wap.js"></script>

	<script>
		let rotate = 25;
		let rotateNum = 38;
		let currentIndex = 0;

		$(document).ready(function() {
			const arr = ['宗旨', '使命', '普施康"寓意', '精神', '目标'];
			for (let i = 0; i < 5; i++) {
				let html = `
				<div class="enterprise-round-item" onclick="setRoundAcitve(${i})" 
				     style="transform: translate(-50%, 0) rotate(-${rotate * i + rotateNum}deg)">
					<div class="enterprise-round-item-text" 
					     style="transform: rotate(${rotate * i + rotateNum}deg)">
						${arr[i]}
					</div>
				</div>
			`;
				$('#enterpriseRoundFour').append(html);
			}

			setRoundAcitve(0);

			$('.upward').on('click', function() {
				if (currentIndex === 0) return;
				currentIndex--;
				setRoundAcitve(currentIndex);
			});

			$('.downward').on('click', function() {
				if (currentIndex === 4) return;
				currentIndex++;
				setRoundAcitve(currentIndex);
			});
		});

		function setRoundAcitve(index) {
			currentIndex = index;
			$('.enterprise-item').hide().eq(index).show();
			$('.enterprise-right-img').hide().eq(index).show();
			$('#roundAcitve').css('transform', `translate(-50%, 0) rotate(-${rotate * index + rotateNum}deg)`);
		}
	</script>

	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					dialogTableVisible: false,
				}
			},

		});
	</script>
</html>